<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/c/font_4057767_f94uenb1j04.css?spm=a313x.7781069.1998910419.76&file=font_4057767_f94uenb1j04.css">
    <link rel="stylesheet" href="./weifeng/css/reset.css">
    <link rel="stylesheet" href="./weifeng/css/index.css">
</head>

<body>
    <div class="weifeng-box">
        <div class="fixed-box">
            <div class="weifeng-top-wrapper">
                <div class="wrapper-box">
                    <a href="" class="wrapper-item">
                        <div class="item-sign"></div>
                    </a>
                    <div class="wrapper-item wrapper-item-title">
                        <a href="" class="item-title item-main">首页</a>
                        <a href="" class="item-title item-community">社区</a>
                    </div>
                    <a href="" class="wrapper-item">
                        <div class="item-person">
                            <div class="person-head"></div>
                            <div class="person-body"></div>
                        </div>
                    </a>
                    <button class="weifeng_app-btn">打开威锋APP</button>
                </div>
            </div>
            <div class="weifeng-list-box swiper">
                <div class="lists-title swiper-wrapper">
                    <div class="title-message title-item swiper-slide" data-id="8">
                        <span class="message-text">资讯</span>
                    </div>
                    <div class="title-attention title-item swiper-slide " data-id="13">
                        <span class="attention-text">关注</span>
                    </div>
                    <div class="title-hot title-item swiper-slide" data-id="9">
                        <a href="./hot.html">
                            <span class="hot-text">热榜</span>
                        </a>
                    </div>
                    <div class="title-video title-item swiper-slide" data-id="10">
                        <a href="./video.html">
                            <span class="video-text">视频</span>
                        </a>
                    </div>
                    <div class="title-special title-item swiper-slide" data-id="11">
                        <a href="./particulars.html">
                            <span class="special-text">专题</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="index-page">
            <div class="message-page">
                <div class="box-banner swiper">
                    <div class="banner-box-inner swiper-wrapper">
                    </div>
                </div>
                <div class="swiper-pagination" id="paging-device"></div>
            </div>
            <div class="top-box">
                <a href="">
                    <div class="icon-top">
                        UPDF：高颜值实力派PDF神器 限时特惠买一送一｜必备软件推荐
                    </div>
                </a>
            </div>
        </div>

    </div>





    <script src="./weifeng/js/axios.js"></script>
    <script src="./weifeng/js/request.js"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
        let _swiper01 = new Swiper('.weifeng-list-box', {
            init: false,
            loop: true,
            direction: 'horizontal',
            slidesPerView: 6,
            centeredSlides: true,
            slideToClickedSlide: true,
            slidesOffsetAfter: 200,// 自动根据容器宽度确定每次滑动的项数
            // grabCursor: true,
        })
        let _swiper02 = new Swiper('.box-banner', {
            init: false,
            direction: 'horizontal', // 垂直切换选项
            autoplay: true,
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
        let str = ''
        let str02 = ''
        let str03 = ''
        async function getData(url, params, _key) {
            let _res = await request({
                url,
                params,
                headers: { 'X-Request-Id': _key }
            })

            return _res.data
        }

        // 列表渲染
        async function renderList() {
            let params = {
                page: 1
            }
            let data = await getData('/v1/content/types', params, 'dgmxgkvRVZg+WaDX0YdMU/oXYXy+Q5S8XklkpbgGLr4W4OFImM2iNKvXl29PJ3jZ');

            data.dataList.forEach(ele => {
                console.log(ele)
                str += `
        <div class="title-attention title-item swiper-slide" data-id="${ele.id}">
                    <span class="attention-text">${ele.name}</span>
                </div>`
            });
            $('.lists-title').append(str)
            _swiper01.init()
        }
        renderList()

        async function renderBanner() {
            let params = {
                appType: 'H5'
            }
            let { data } = await getData('v2/yesfeng/slideshow', params, 'sdvypOCtvIWvX6nwxP56O5WG7JykBfNmx6mHEsw/XF9u8KEqghNbI3fa8k/EiA3VwanP2xcg42vwAn9XILp/Rw==');
            console.log(data)
            data.forEach(ele => {
                str02 += `
                    <div class="inner-item swiper-slide" data-banner="${ele.id}">
                            <a href="">
                                <img src="${ele.image}"
                                    alt="">
                            </a>
                        </div>`
            });
            $('.banner-box-inner').append(str02)
            _swiper02.init()
        }
        renderBanner()
        let _page = 0
        async function renderArticle() {
            _page++
            let params = {
                page: _page,
                pageCount: 20,
            }
            let { data } = await getData('v1/content/type/list', params, 'dgmxgkvRVZg+WaDX0YdMU6N6CO/H3U7PGly02rBHH2bBz9KcBGCN82uaiZVFyJDO+lhwx+b7MWcUY8QZ57KwqA==');
            console.log(data)
            data.data.contentsList.forEach(ele => {
                str03 += `
                <div class="article-bigbox">
                <div class="article-item">
                    <a href="" class="item-website">
                        <div class="item-head">
                            <img src="${ele.relatedTopics[0].topicIcon}"
                                alt="">
                            <div class="item-news">${ele.tag[0]}</div>
                            <div class="item-time">${ele.createTime}</div>
                        </div>
                    </a>
                </div>
                <div class="article-box">
                    <div class="article-cover">
                        <img src="${ele.smallImages[0]}"
                            alt="">
                    </div>
                    <div class="article-text" data-text="${ele.tid}">
                            <div class="text-title">  ${ele.title}</div>
                            <div class="text-outline"> ${ele.intro}</div>
                        <div class="article-count">
                            <div class="view-count">${ele.praisedCount}</div>
                            <div class="comment-count">${ele.commentsCount} </div>
                            <div class="applause-count">${ele.viewsCount}</div>
                        </div>
                    </div>
                </div>
            </div>`
            });
            $('.index-page').append(str03)
        }
        renderArticle()
        // 触底加载
        let _load = true
        window.addEventListener('scroll', function () {
            // 检查是否滚动到页面底部
            if (document.documentElement.scrollTop + window.innerHeight >= document.documentElement.scrollHeight - 100 && _load) {
                // 在此处加载更多内容
                renderArticle()
                setTimeout(() => {
                    _load = true;
                }, 2500);
                _load = false;
            }
        });
    </script>
</body>

</html>